import React from 'react';
import { useEffect } from 'react';
import { connect } from 'react-redux'
const App = ({ count, add, reduce, proList, getProList }) => { // 展示组件/UI组件
  useEffect(() => {
    getProList()
  }, [getProList])
  return (
    <div>
      <button onClick = { () => { add() } }>加</button>
      { count }
      <button onClick = { () => { reduce() } }>减</button>
      <ul>
        {
          proList && proList.map(item => (
            <li key = { item.proid }>{ item.proname }</li>
          ))
        }
      </ul>
    </div>
  );
};
const mapStateToProps = (state) => {
  return {
    count: state.count,
    proList: state.proList
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    add () {
      dispatch({ type: 'ADD_COUNT' })
    },
    reduce () {
      dispatch({ type: 'REDUCE_COUNT' })
    },
    getProList () {
      // 数据请求
      fetch('http://121.89.205.189:3001/api/pro/list').then(res => res.json()).then(res => {
        console.log(res.data) // 只要count的值发生改变，useEffect就会重新执行
        dispatch({
          type: 'CHANGE_PRO_LIST',
          payload: res.data
        })
      })
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App); // 返回的是容器组件